Ext.define('DCApp.view.doc.DataView', {
    extend: 'Ext.view.View',
    alias: 'widget.imgview',
    requires: [
                 'Ext.data.*',
                 'Ext.util.*',
                 'Ext.view.View',
                 'Ext.ux.DataView.DragSelector',
                 'Ext.ux.DataView.LabelEditor'
             ],   
    mixins: {
        dragSelector: 'Ext.ux.DataView.DragSelector',
        draggable   : 'Ext.ux.DataView.Draggable'
    },
    tpl: [
          '<tpl for=".">',
              '<div class="thumb-wrap" >',
           		'<div class="thumb" rel="fullScreenGallery" href="{url}" style="background:url({url}) 50% 50% no-repeat;"></div>',
                 '<span class="x-editable">{shortName:htmlEncode}</span>',
              '</div>',
          '</tpl>',
          '<div class="x-clear"></div>'
      ],
      cls: 'images-view',
      showTip: false,
      scrollable: false,
      trackOver: true,
      overItemCls: 'x-item-over',
      itemSelector: 'div.thumb-wrap',
      multiSelect: true,
    singleSelect: false,

      emptyText: 'No images to display',
      viewModel: {
          type: 'imglist'
      },
      bind: {
          store: '{objs}'
      },

      plugins: [
          Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'imageName'})
      ],
      prepareData: function(data) {
    	  var uri = '../imgs/'+data.imageId % 5+'.jpg'; 
          Ext.apply(data, {
        	  url:uri,
              shortName: Ext.util.Format.ellipsis(data.imageName, 15),
              dateString: Ext.util.Format.date(data.lastUpdate, "m/d/Y g:i a")
          });
          return data;
      },
      listeners: {
           selectionchange: function(dv, nodes ){
        	  //this.tip.show();
              var l = nodes.length,
                  s = l !== 1 ? 's' : '';
             // this.up('panel').setTitle('附件列表  选中 (' + l + ' 条 )');
          },
          containermouseout:function( dv, event, eOpts ){
        	  if(dv.tip)
        		  dv.tip.hide();
          },
          containermouseover:function( dv, event, eOpts ){
        	  //if(dv.tip)
        		 // dv.tip.show();
          }
      },
      refresh: function() {
    	  this.callParent(arguments);
      },
      hookfullScreen:function(){
    	  setTimeout(function(){    		  
    		  var fs =  $('.thumb[rel="fullScreenGallery"]');
    		  if(fs.length==0)
    			  return;
    		  fs.fullScreenGallery();   		  
    	  },200);
      },
      afterRender: function() {
    	  //console.log(this);
    	  var v = this;
    	  v.dropZone = Ext.create("Ext.dd.DropZone",v.getEl(),{
    		    // Tell the zone what our target component is
    		    getTargetFromEvent: function(e) { 
    		        return e.getTarget(v.itemSelector);
    		    },
    		    // When the node is dropped, add a new instance to the
    		    // the component via the supplied component clone
    		    onNodeDrop : function(target,dd,e,data){
    		    	var rec = v.getRecord(target);
    		    	var datarecs = data.records;
    		    	var st = v.getStore();
    		    	st.remove(datarecs);
    		    	var pos=st.indexOf(rec);
    		    	st.insert(pos,datarecs)
    		        v.hookfullScreen();
    		    },
    		    ddGroup: 'imgGroup'
    		  });
    	    v.tip = Ext.create('Ext.tip.ToolTip', {
    	    	closable : true,
    	        target: v.el,
    	        //anchor: 'bottom',  
    	        //header:false,
    	        //layout:'fit',
    	        //anchorOffset: 150,    
    	        delegate: v.itemSelector,
    	       // trackMouse: true,
    	        //minWidth: 300, 
    	        //maxWidth: 500,
    	        dismissDelay: 0,
    	        //showDelay: 800,
    	        width:600,
    	        items:[{
                    xtype: 'propertygrid',
                    nameColumnWidth: 165,
                    source: {
                        '(name)': 'Properties Grid',
                        grouping: false,
                        autoFitColumns: true,
                        productionQuality: false,
                        created: Ext.Date.parse('10/15/2006', 'm/d/Y'),
                        tested: false,
                        version: 0.01,
                        borderWidth: 1
                    },
                    sourceConfig: {
                        borderWidth: {
                            displayName: '文件尺寸'
                        },
                        tested: {
                            displayName: '有大影像'
                        }
                    }
                }],
    	        renderTo: Ext.getBody(),
    	        listeners:{
    	            beforeshow: function(tip){
    	            	if(!v.showTip)
    	            		return false;
    	               // tip.update( v.getRecord(tip.triggerElement).get('shortName'));
    	            }
    	        }    	    });
    	    this.callParent();
      },
    initComponent: function() {        
        this.mixins.dragSelector.init(this);
        this.mixins.draggable.init(this, {
            ddConfig: {
                ddGroup: 'imgGroup'
            },
            ghostTpl: [
                '<tpl for=".">',
                    '<img src="{url}" />',
                    '<tpl if="xindex % 4 == 0"><br /></tpl>',
                '</tpl>',
                '<div class="count">',
                    '{[values.length]} images selected',
                '<div>'
           ]
        });
        this.callParent(arguments);
    }
});